import { ref } from 'vue'
import { defineStore } from 'pinia'
import type { is_tip_show_arraylist } from '@/type/course'
import { updateCourseContents } from '@/api/course'

export const useTipsStore = defineStore('tips', () => {
  const content = ref<string>('')
  const openedTipsID = ref<number[]>([-1])
  const isTipShowArrayList = ref<is_tip_show_arraylist>([
    { id: -1, isShow: false, tipTitle: '', tipContent: '' }
  ])
  const resetContent = ref<string>(
    '<p>\n' +
    '    平面内的一条直线，把这个平面分为两部分，每一部分都叫作半平面。从一条直线出发的两个半平面所组成的图形叫作二面角。这条直线叫作二面角的棱，这两个半平面叫作二面角的面。二面角的大小，可以用它的平面角来度量，二面角的平面角是几度，就说这个二面角是几度。\n' +
    '  </p>\n' +
    '  <p> 二面角也可以看作是从一条直线出发的一个半平面绕着这条直线旋转，它的最初位置和最终位置组成的图形。</p>\n' +
    '  <p>二面角的平面角的大小，与其顶点在棱上的位置无关。如果两个二面角能够完全重合，则说它们是相等的．如果两个二面角的平面角相等，那么这两个二面角相等。反之，相等二面角的\n' +
    '    <span data-id="0" style="color: #63b0ff;cursor: pointer;">平面角</span>\n' +
    '    相等\n' +
    '  </p>'
  )
  // const resetContent = ref<string>(
  //   '<p>$$ \\vec{a} = \\begin{pmatrix} a_1 \\\\ a_2 \\\\ a_3 \\end{pmatrix} $$</p>' +
  //   '<p>$$ |\\vec{a}| = \\sqrt{a_1^2 + a_2^2 + a_3^2} $$</p>' +
  //   '<p>$$ \\vec{a} \\cdot \\vec{b} = a_1 b_1 + a_2 b_2 + a_3 b_3 $$</p>' +
  //   '<p>$$ \\vec{a} \\times \\vec{b} = \\begin{pmatrix} a_2 b_3 - a_3 b_2 \\\\ a_3 b_1 - a_1 b_3 \\\\ a_1 b_2 - a_2 b_1 \\end{pmatrix} $$</p>' +
  //   '<p><span data-id="1" style="color: #63b0ff;cursor: pointer;">测试</span></p>'
  // )
  const handleContent = (Content: string) => {
    content.value = Content
  }

  const handleTipContent = (id: number, TipTitle: string, TipContent: string, judge: boolean) => {
    if (openedTipsID.value.includes(id)) return
    isTipShowArrayList.value.push({ id, isShow: judge, tipTitle: TipTitle, tipContent: TipContent })
    openedTipsID.value.push(id)
  }
  //处理弹窗关闭
  const handleTipClose = (id: number) => {
    const index: number = isTipShowArrayList.value.findIndex((item) => item.id === id)
    const openedID: number = openedTipsID.value.findIndex((item) => item === id)
    if (index !== -1 && openedID !== -1) {
      // index !== -1，即为找到
      isTipShowArrayList.value.splice(index, 1)
      openedTipsID.value.splice(openedID, 1)
    }
  }

  //处理标注后的更新
  const handleCourseContentUpdate = async (id: number, content: string) => {
    const data = { id, content }
    const res = await updateCourseContents(data)
  }

  const testContent = ref<string>(
    '<p>\n' +
    '    平面内的一条直线，把这个平面分为两部分，每一部分都叫作半平面。从一条直线出发的两个半平面所组成的图形叫作二面角。这条直线叫作二面角的棱，这两个半平面叫作二面角的面。二面角的大小，可以用它的平面角来度量，二面角的平面角是几度，就说这个二面角是几度。\n' +
    '  </p>\n' +
    '  <p> 二面角也可以看作是从一条直线出发的一个半平面绕着这条直线旋转，它的最初位置和最终位置组成的图形。</p>\n' +
    '  <p>二面角的平面角的大小，与其顶点在棱上的位置无关。如果两个二面角能够完全重合，则说它们是相等的．如果两个二面角的平面角相等，那么这两个二面角相等。反之，相等二面角的\n' +
    '    <span data-id="0" style="color: #63b0ff;cursor: pointer;">平面角</span>\n' +
    '    相等\n' +
    '  </p>\n'
  )

  return {
    testContent,
    resetContent,
    openedTipsID,
    isTipShowArrayList,
    content,
    handleContent,
    handleTipContent,
    handleTipClose,
    handleCourseContentUpdate
  }
})
